<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘好货 - 登录</title>
    <script src="/static/css/tailwindcss.css"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF4400',
                        secondary: '#FFB800',
                        dark: '#1F2937',
                        light: '#F9FAFB',
                        muted: '#6B7280',
                        surface: '#FFFFFF',
                        'surface-elevated': '#F3F4F6',
                        'primary-light': '#FFEBE0',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    },
                    animation: {
                        'float': 'float 3s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': {transform: 'translateY(0)'},
                            '50%': {transform: 'translateY(-10px)'},
                        }
                    }
                },
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }

            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }

            .button-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-primary-light via-red-50 to-yellow-50 min-h-screen flex items-center justify-center p-4">
<!-- 背景装饰元素 -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute -top-40 -right-40 w-96 h-96 bg-primary/5 rounded-full blur-3xl animate-float"></div>
    <div class="absolute -bottom-20 -left-20 w-72 h-72 bg-secondary/10 rounded-full blur-3xl"></div>
</div>

<!-- Vue根容器 -->
<div id="app" class="w-full max-w-md relative z-10">
    <!-- 卡片容器 -->
    <div class="bg-surface rounded-2xl shadow-card overflow-hidden transition-all duration-500 hover:shadow-card-hover">
        <!-- 顶部装饰条 -->
        <div class="h-1 bg-gradient-to-r from-primary to-secondary"></div>

        <!-- 登录表单 -->
        <div class="p-8 md:p-10">
            <!-- 品牌标识 -->
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4 transform transition-transform duration-500 hover:scale-110">
                    <i class="fa fa-shopping-bag text-3xl text-primary"></i>
                </div>
                <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-2 bg-gradient-to-r from-primary to-secondary text-gradient">
                    淘好货</h1>
                <p class="text-muted text-sm md:text-base">优质商品 · 便捷购物</p>
            </div>

            <!-- 表单 -->
            <form @submit.prevent="login" class="space-y-6">
                <!-- 用户名输入 -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-dark">用户名</label>
                    <div class="relative">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                <i class="fa fa-user"></i>
              </span>
                        <input
                                type="text"
                                v-model="form.username"
                                required
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 input-focus transition-all duration-300 placeholder-muted placeholder-opacity-75"
                                placeholder="请输入用户名">
                    </div>
                </div>

                <!-- 密码输入 -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-dark">密码</label>
                    <div class="relative">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                <i class="fa fa-key"></i>
              </span>
                        <input
                                type="password"
                                v-model="form.password"
                                required
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 input-focus transition-all duration-300 placeholder-muted placeholder-opacity-75"
                                placeholder="请输入密码">
                        </button>
                    </div>
                </div>

                <!-- 记住我和忘记密码 -->
                <div class="flex items-center justify-between">
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <input type="checkbox"
                               v-model="form.rememberMe"
                               class="h-4 w-4 text-primary focus:ring-primary rounded transition-colors duration-300">
                        <span class="text-sm text-muted">记住我</span>
                    </label>
                    <a href="#"
                       class="text-sm text-primary hover:text-primary/80 transition-colors duration-300">忘记密码?</a>
                </div>

                <!-- 登录按钮 -->
                <button
                        type="submit"
                        class="w-full py-3 px-4 bg-gradient-to-r from-primary to-primary/90 text-white rounded-lg font-medium shadow-lg
                   shadow-primary/20 button-hover flex items-center justify-center">
                    <span>立即登录</span>
                    <i class="fa fa-arrow-right ml-2"></i>
                </button>
            </form>

            <!-- 分隔线 -->
            <div class="relative my-8">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-200"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="px-2 bg-surface text-muted">其他登录方式</span>
                </div>
            </div>

            <!-- 社交登录 -->
            <div class="grid grid-cols-3 gap-4">
                <button class="flex items-center justify-center py-3 rounded-lg border border-gray-200 hover:border-[#07C160]/30 hover:bg-[#07C160]/5 transition-all duration-300">
                    <i class="fa fa-weixin text-xl text-[#07C160]"></i>
                </button>
                <button class="flex items-center justify-center py-3 rounded-lg border border-gray-200 hover:border-[#12B7F5]/30 hover:bg-[#12B7F5]/5 transition-all duration-300">
                    <i class="fa fa-qq text-xl text-[#12B7F5]"></i>
                </button>
                <button class="flex items-center justify-center py-3 rounded-lg border border-gray-200 hover:border-[#00A0E9]/30 hover:bg-[#00A0E9]/5 transition-all duration-300">
                    <i class="fa fa-apple text-xl text-[#A8A8A8]"></i>
                </button>
            </div>

            <!-- 注册链接 -->
            <div class="mt-8 text-center">
                <p class="text-sm text-muted">
                    还没有账号? <a href="/register"
                                   class="font-medium text-primary hover:text-primary/80 transition-colors duration-300">立即注册</a>
                </p>
            </div>
        </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="mt-6 text-center text-xs text-muted">
        <p>© 2025 淘好货. 保留所有权利.</p>
    </div>
</div>
</body>
<script src="/static/js/vue.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/message.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                util,
                form: {
                    username: '',
                    password: '',
                    rememberMe: false // 声明记住我状态
                },
            };
        },
        mounted() {
            this.loadFromCookie(); // 页面加载时读取 Cookie
        },
        methods: {
            async login() {
                if (!this.form.username || !this.form.password) {
                    message.error('请输入账号密码');
                    return;
                }
                try {
                    const response = await fetch('/login', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.form)
                    });
                    if (response.ok) {
                        const res= await response.json();
                        sessionStorage.setItem('user-info',res.user.username);
                        message.success('登录成功');
                        setTimeout(() => {
                            const url = util.store.get("return-url");
                            window.location = url || '/';
                        }, 1500);
                    }else {
                         const error = await response.json();
                         message.error(error.message);
                    }
                } catch (error) {
                    message.error('网络错误，请稍后重试');
                }

            },
            saveToCookie() {
                const {username, password} = this.form;
                // 直接存储用户名和密码（注意：生产环境必须加密！）
                document.cookie = `username=${encodeURIComponent(username)}; expires=${this.getExpireDate(7)}; path=/;`;
                document.cookie = `password=${encodeURIComponent(password)}; expires=${this.getExpireDate(7)}; path=/;`;
                // 无需存储 rememberMe，通过 Cookie 是否存在判断是否记住
            },

            loadFromCookie() {
                const username = decodeURIComponent(this.getCookie('username')) || '';
                const password = decodeURIComponent(this.getCookie('password')) || '';
                // 只有当用户名和密码都存在时，才填充表单
                if (username && password) {
                    this.form.username = username;
                    this.form.password = password;
                    this.form.rememberMe = true; // 自动勾选复选框
                }
            },
            // 辅助函数：获取 Cookie 值
            getCookie(name) {
                const value = `; ${document.cookie}`;
                const parts = value.split(`; ${name}=`);
                return parts.length === 2 ? parts.pop().split(';').shift() : null;
            },
        }
    });
</script>
</html>